<template>
	<div class="madp-customer-list-detail">
		<div class="madp-basic-title">基础信息</div>
		<div class="madp-basic-box">
			<el-row>
				<el-col class="basic-box-left">
					<div class="img">
						<img :src="info.avatar" :onerror="`src='/img/${info.gender === 1 ? 'male' : 'female'}.png'`" alt />
					</div>
					<div class="name">{{ info.name }}</div>
					<div class="weixin">
						<i class="el-icon-female" />
						<span>@{{ info.typeText }}</span>
					</div>
				</el-col>
				<el-col :span="12" class="basic-box-right">
					<el-form label-width="130px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="客户号:">
									<span v-if="info.businessNo !== ''">{{ info.businessNo }}</span>
									<span v-else>无</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="所属企业:">
									<span v-if="info.corpName !== ''">{{ info.corpName }}</span>
									<span v-else>无</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="性别:">
									<span v-if="info.genderText !== ''">{{ info.genderText }}</span>
									<span v-else>无</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="职位:">
									<span v-if="info.position !== ''">{{ info.position }}</span>
									<span v-else>无</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="类型:">
									<span>{{ info.typeText }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div class="madp-basic-title">关联信息</div>
		<el-table :data="tableList" class="madp-table" border style="width: 100%">
			<el-table-column label="所属成员" prop="employeeName"></el-table-column>
			<el-table-column label="客户来源" prop="addWayText"></el-table-column>
			<el-table-column label="标签" prop="tags">
				<template slot-scope="scope">
					<div v-if="scope.row.tags.length == 0">--</div>
					<div v-else>
						<el-tag style="margin-top:5px" v-for="(item, index) in scope.row.tags" :key="index">{{ item }}</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="描述" prop="description">
				<template slot-scope="scope">
					<span v-if="scope.row.description !== ''">{{ scope.row.description }}</span>
					<span v-else>--</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="createTime"></el-table-column>
			<el-table-column label="备注的企业名称" prop="remarkCorpName">
				<template slot-scope="scope">
					<span v-if="!scope.row.remarkCorpName">--</span>
					<span v-else>{{ scope.row.remarkCorpName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备注的手机号码" prop="remarkMobiles">
				<template slot-scope="scope">
					<span v-if="!scope.row.remarkMobiles">--</span>
					<span v-else>{{ scope.row.remarkMobiles }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" prop="remark"></el-table-column>
			<el-table-column label="互动轨迹">
				<template slot-scope="scope">
					<el-button type="text" @click="handleQuery(scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="madp-center-box">
			<div class="madp-left">
				<div class="madp-basic-title">用户画像</div>
				<div class="madp-user-photo" v-if="showChart">
					<b class="madp-investment-preference">投资偏好</b>
					<div id="madp-chart-pie" class="madp-pie-wrap"></div>
				</div>
				<div class="madp-user-photo" v-show="!showChart">
					<el-empty description="暂无数据" :image-size="100"></el-empty>
				</div>
			</div>
			<div class="madp-left">
				<div class="madp-basic-title">所属群聊</div>
				<div class="madp-group-chat">
					<div v-if="items.length > 0">
						<el-tag v-for="(item, index) in items" :key="index" style="margin-bottom:15px;margin-left:15px">{{ item }}</el-tag>
					</div>
					<div v-else class="madp-no-data madp-no-chat">
						<el-empty description="暂无数据" :image-size="100"></el-empty>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="互动轨迹" :close-on-click-modal="false" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<div class="madp-pane-wrapper">
				<el-timeline>
					<div v-if="trackList.length > 0">
						<el-timeline-item :color="theme" v-for="item in trackList" :key="item.id">
							{{ item.createTime }}
							<p class="madp-pane-color">{{ item.content }}</p>
						</el-timeline-item>
					</div>
					<div v-else class="madp-no-data">
						<img class="madp-no-link" src="/img/nodata.png" alt />
						<div>暂无轨迹</div>
					</div>
				</el-timeline>
				<div class="madp-track-page" v-if="trackList.length > 0">
					<el-button @click="getMoreList" v-if="isMoreShow">加载更多</el-button>
					<span v-else>没有更多了</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';
import echarts from 'echarts';
require('echarts/theme/macarons');
import { basicInfo, linkInfo, synTrack, editContactNo } from '@/api/madp-customer/madp-customer-new';
export default {
	props: {
		detailMsg: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	data() {
		return {
			businessNo: '',
			dialogVisible: false,
			items: [],
			tableList: [],
			trackList: [],
			isMoreShow: false,
			trackObj: {},
			trackPage: {
				current: 1,
				size: 10,
				total: 0,
			},
			info: {},
			showChart: true,
			chartInfo: {
				//显示在上面的文字
				tooltip: {
					trigger: 'item',
					//formatter: "{a}<br/>{b}: <br/>{c}({d}%)", // 其中 {a}指向name名称（访问来源）
					formatter: '{b}: <br/>{c}({d}%)',
				},
				legend: {
					show: false,
					data: ['股票基金', '非标固收', '债券基金', '股权基金'],
					orient: 'vertical',
					bottom: 10,
					left: 'center',
					top: 'bottom',
					orient: 'horizontal',
				},
				series: [
					{
						left: 'center',
						name: '偏好',
						type: 'pie',
						//圆圈的粗细
						radius: ['30%', '50%'],
						//圆圈的位置
						center: ['50%', '50%'],
						data: [],
						// 定义饼状图的引导线
						labelLine: {
							// show: false // 让环形引导线不展示
							length: 10, //引导线第一段长度
							length2: 8, //引导线第二段长度
						},
						//动画持续时间:2秒
						animationDuration: 2000,
						//控制是否显示指向文字的,默认为true
						label: {
							show: true,
							//以下代码可以代表指向小文字的
							formatter: '{b}{d}%',
							textStyle: {
								color: '#333',
								fontSize: 11,
							},
						},
						itemStyle: {
							emphasis: {
								shadowBlur: 100,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					},
				],
			},
		};
	},
	computed: {
		...mapGetters(['theme']),
	},
	mounted() {
		this.getLinkInfo();
		this.getBasicInfo();
	},
	methods: {
		// 返回
		goBack() {
			this.$emit('goBack');
		},
		drawPieChart() {
			this.chartPie = echarts.init(document.getElementById('madp-chart-pie'), 'macarons');
			this.chartPie.setOption(this.chartInfo);
		},
		//获取基础信息
		getBasicInfo() {
			console.log('detailMsg', this.detailMsg);
			let obj = {
				id: this.detailMsg.contactId,
				custNo: this.detailMsg.custNo,
			};
			basicInfo(obj).then((res) => {
				this.items = res.data.data.roomList;
				this.info = res.data.data;
				if (res.data.data.customerAssetsInfoVO) {
					this.showChart = true;
					this.chartInfo.series[0].data = [
						{
							value: res.data.data.customerAssetsInfoVO.amPlanBal,
							name: '资管计划',
						},
						{
							value: res.data.data.customerAssetsInfoVO.deptBal,
							name: '存款',
						},
						{
							value: res.data.data.customerAssetsInfoVO.finProdBal,
							name: '理财产品余额',
						},
						{
							value: res.data.data.customerAssetsInfoVO.fundBal,
							name: '基金余额',
						},
						{
							value: res.data.data.customerAssetsInfoVO.insureBal,
							name: '保险余额',
						},
						{
							value: res.data.data.customerAssetsInfoVO.loanBal,
							name: '贷款余额',
						},
						{
							value: res.data.data.customerAssetsInfoVO.metalBal,
							name: '贵金属余额',
						},
						{
							value: res.data.data.customerAssetsInfoVO.trustBal,
							name: '信托',
						},
					];
					this.drawPieChart();
				} else {
					this.showChart = false;
				}
			});
		},
		getLinkInfo() {
			let params = {
				id: this.detailMsg.contactId,
			};
			linkInfo(params).then((res) => {
				this.tableList = res.data.data.records;
			});
		},
		// 获取客户互动轨迹
		getSynTrack() {
			let data = {
				contactId: this.trackObj.contactId,
				employeeId: this.trackObj.employeeId,
				current: this.trackPage.current,
				size: this.trackPage.size,
			};
			synTrack(data).then((res) => {
				if (res.data && res.data.code === 0) {
					let { records, pages, current, size, total } = res.data.data;
					if (current === 1) {
						this.trackList = [].concat(records);
					} else {
						this.trackList = this.trackList.concat(records);
					}

					this.trackPage = {
						pages,
						current,
						size,
						total,
					};
					if (current < pages) {
						this.isMoreShow = true;
					} else {
						this.isMoreShow = false;
					}
				}
			});
		},
		getMoreList() {
			this.trackPage.current += 1;
			this.getSynTrack();
		},
		handleClose() {
			this.dialogVisible = false;
		},
		handleQuery(row) {
			this.dialogVisible = true;
			this.trackObj = row;
			this.getSynTrack();
		},
	},
};
</script>
<style lang="scss" scoped>
.el-icon-edit {
	margin-left: 10px;
}
.madp-customer-list-detail {
	padding-top: 35px;
	.madp-basic-box {
		padding: 15px;
		border: 1px solid #ccc;
		.basic-box-left {
			width: 240px;
		}
		.basic-box-right {
			max-width: 800px;
			min-width: 450px;
			padding: 15px 0 0 0;
		}
	}
	.img {
		width: 150px;
		height: 150px;
		img {
			border-radius: 50%;
			width: 100%;
			height: auto;
		}
	}
	.name {
		padding: 10px;
		width: 150px;
		text-align: center;
	}
	.weixin {
		width: 150px;
		text-align: center;
		span {
			margin-top: 8px;
			color: #1dce7b;
			margin-right: 10px;
		}
	}
}
.madp-basic-title {
	border: 1px solid #ccc;
	width: fit-content;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
	padding: 0 10px;
}
.madp-table {
	border: 1px solid #ccc;
}
.madp-basic-info {
	height: 36px;
	line-height: 36px;
	font-size: 14px;
}
.madp-row-label {
	display: inline-block;
	margin: 0 200px;
}
.madp-row-add {
	margin: 0 228px 0 200px;
}
.madp-center-box {
	display: flex;
	justify-content: space-between;
}
.madp-left {
	width: 49%;
}
.madp-user-photo {
	padding-top: 10px;
	border: 1px solid #ccc;
	height: 234px;
}
.madp-group-chat {
	vertical-align: middle;
	padding-top: 10px;
	border: 1px solid #ccc;
	height: 234px;
}
.madp-pie-wrap {
	width: 100%;
	height: 200px;
	margin: 0 auto;
}
.madp-investment-preference {
	font-weight: 500;
	margin-left: 13px;
	margin-top: 15px;
}
.madp-pane-wrapper {
	padding: 10px;
	.el-timeline-item {
		padding-bottom: 0;
	}
}
.madp-track-page {
	display: flex;
	justify-content: center;
}
.madp-pane-color {
	background: #eee;
	padding: 10px;
}
.madp-no-data {
	text-align: center;
}
.madp-no-link {
	width: 80px;
	height: 80px;
}
</style>
